<template>
  <div class="scroll-wrapper" ref="wrapper">
      <div class="scroll-content">
          <div v-if="!errorShow" >
            <view-list v-if="field === 'view'" :viewDatas="ListDatas"></view-list>
            <food-list v-if="field === 'food'" :foodDatas="ListDatas"></food-list>
            <hotel-list v-if="field === 'hotel'" :hotelDatas="ListDatas"></hotel-list>
            <massage-list v-if="field === 'massage'" :massageDatas="ListDatas"></massage-list>
            <ktv-list v-if="field === 'ktv'" :ktvDatas="ListDatas"></ktv-list>
            <loading
             :loadingShow="loadingShow"
            ></loading>
          </div>
          <error v-else :errorShow="errorShow"></error>
      </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll';
import tools from 'utils/tools';

import ViewList from './ViewList/Index';
import FoodList from './FoodList/Index';
import HotelList from './HotelList/Index';
import MassageList from './MassageList/Index';
import KtvList from './KtvList/Index';
import Loading from './Sub/Loading';
import Error from './Sub/Error'

import { mapState } from 'vuex';

import { ListModel } from 'models/list';

export default {
    name: 'ListScrollWrapper',
    components: {
        ViewList,
        FoodList,
        HotelList,
        MassageList,
        KtvList,
        Loading,
        Error,
    },
    data () {
        return {
            errorShow: false,
            loadingShow: true,
            ListDatas: []
        }
    },
    created () {
        this.getListDatas(this.cityId, this.field)
    },
    mounted () {},
    computed: {
        ...mapState(['cityId', 'field'])
    },
    methods: {
        getListDatas (cityId, field) {
            const listModel = new ListModel()
            this.ListDatas = []
            this.loadingShow = true
            listModel.getListDatas(cityId, field).then((res) => {
                if (res && res.status === 0) {
                    const data = tools.formatJSON(res.data, 'keyword')
                    this.errorShow = false
                    this.ListDatas = data
                    // 数据更新Dom渲染完成之后，进行挂载BetterScroll操作  
                    this.$nextTick(()=>{
                        this.scroll = new BetterScroll(this.$refs.wrapper)
                        this.loadingShow = false
                    })
                } else {
                    this.errorShow = true
                }
            })
        }
    },

    watch: {
        cityId () {
          this.getListDatas(this.cityId, this.field)
        }
    }
}
</script>

<style lang="scss" scoped>

</style>